<template>
	<view class="gift">
		<view class="search">
			<u-search v-model="keyword" placeholder="请输入名字或者地址" shape="square" searchIconColor="#55AAFF" borderColor="#ddd"
				animation @search="getGiftList('refresh')" @custom="getGiftList('refresh')" @clear="getGiftList('refresh')"></u-search>
		</view>
		<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="getGiftList('loadmore')">
			<view class="gift-list">
				<view class="card" v-for="item,index in giftlist" :key="item.id">
					<view class="card-info">
						<u--image :src="item.gift_book_category_image" width="80px" height="80px"
							@click="click"></u--image>
						<view class="card-center">
							<view class="card-center-line">随礼人：{{ item.name }}</view>
							<view class="card-center-line">金额：{{ item.money }}</view>
							<view class="card-center-line">创建时间：{{ item.create_time }}</view>
							<view class="card-center-line">地址：{{ item.address }}</view>
							<view class="card-center-line">备注：{{ item.remark }}</view>
						</view>
					</view>
					<view class="card-extra">
						<view class="card-button del" @click.stop="del(item,index)">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '../../static/utils/request'
	import {
		Gift
	} from '../../static/utils/service'
	import {
		Toast
	} from '../../static/utils/utils'
	export default {
		data() {
			return {
				gift_book_id: '',
				keyword: '',
				giftlist: [],
				page_no: 1,
				page_size: 10
			}
		},
		onLoad(e) {
			this.gift_book_id = e.gift_book_id
			this.getGiftList()
		},
		methods: {
			//获取列表
			async getGiftList(source) {
				if (source === 'loadmore') {
					this.page_no++
				}
				if (source === 'refresh') {
					this.page_no = 1
					this.giftlist = []
				}
				const {
					code,
					data,
					msg
				} = await get(Gift.lists, {
					gift_book_id: this.gift_book_id,
					name: this.keyword,
					page_no: this.page_no,
					page_size: this.page_size
				}, '加载中')
				if (code === 1) {
					this.giftlist.push(...data.lists)
				} else Toast.error(msg)
			},
			del(e, i) {
				uni.showModal({
					title: '删除提示',
					content: '数据删除后将无法恢复，是否继续？',
					confirmColor: '#c53c24',
					success: async modalResp => {
						if (modalResp.confirm) {
							const res = await post(Gift.delete, {
								id: e.id
							}, '删除中')
							if (res.code === 1) {
								this.giftlist.splice(i, 1)
								Toast.success('删除成功')
							} else Toast.error(res.msg)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.gift {
		height: 100%;
		display: flex;
		flex-direction: column;

		.search {
			padding: 10rpx 25rpx;
			border-bottom: 2rpx solid #ddd;
		}

		.scroll-view {
			flex: 1;
			overflow: hidden;

			.gift-list {
				padding-bottom: 100rpx;

				.card {
					background-color: #fff;
					border-bottom: 2rpx solid #f6f6f6;

					.card-info {
						padding: 10rpx 25rpx;
						display: flex;
						align-items: center;

						.card-center {
							margin-left: 20rpx;

							.card-center-line {
								font-size: 26rpx;
								line-height: 1.8;
							}

							.card-center-line2 {
								display: flex;
								align-items: center;
								justify-content: space-between;
							}
						}
					}

					.card-extra {
						padding: 0 20rpx 10rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.card-button {
							margin-left: 20rpx;
							font-size: 24rpx;
							width: 130rpx;
							height: 50rpx;
							text-align: center;
							line-height: 50rpx;
							border-radius: 6rpx;
							border: 2rpx solid #666;
						}

						.del {
							border-color: #c53c24;
							color: #c53c24;
						}
					}

				}
			}

		}
	}
</style>